<template>
  <div  class="p16 flex-column-null-between container" style="height:calc(100vh - 140px)">
    <el-row>
      <el-col :span="5">
        <div class="grid-content bg-purple" @click="OptionCardClose">
          <div slot="header" style="border-bottom:1px solid #e1e4e7" class="top-from">接口类别
            <el-button style="margin-left: 20px" type="success" size="mini" icon="el-icon-refresh"  @click="refreshInterClass"></el-button>
            <el-button  type="primary" size="mini" @click="addInterClass">新增</el-button>
          </div>

          <div style="margin-top:20px;overflow: auto;height: calc(100vh - 270px)">
            <el-tree
                v-loading="classLoading"
                node-key="id"
                :current-node-key="nowNodeId"
                :data="classData"
                :props="defaultProps"
                default-expand-all
                highlight-current
                :expand-on-click-node="classExpandOnClickNode"
                @node-click="handleNodeClick"
                @node-contextmenu="contextMenu">

            </el-tree>
            <div class="right-menu" :style="{'z-index':999,'position':'fixed',left:leftNumber + 'px',
                                top: topNumber + 'px',
                                width:'80px',
                                background:'white','box-shadow':'0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04)'}"
                 v-show="optionCardShow"
                 id="option-button-group">
              <el-button @click="classAdd" class="option-card-button">新增</el-button>
              <el-button @click="classChange" class="option-card-button">修改</el-button>
              <el-button @click="classRemove" class="option-card-button">删除</el-button>
            </div>

            <!-- 添加类别 -->
            <addClass ref="addClass" @success="addClassOperate"/>
            <!-- 编辑类别 -->
            <editClass ref="editClass"/>
          </div>

        </div>
      </el-col>

      <el-col :span="18">

        <div class="grid-content bg-purple-light">
          <div>
            <div class="search-item">
              <el-input
                  size="small"
                  v-model="queryParams.keyWord"
                  class="input-width clear-input"
                  suffix-icon="el-icon-search"
                  clearable
                  placeholder="请输入查询内容"
              ></el-input>
            </div>
            <div class="search-item">
              <el-button type="primary" size="small"  @click="queryInterfaceList">搜索</el-button>
              <el-button type="primary" size="small"  @click="addInterface">添加</el-button>
            </div>

          </div>

          <el-table
              :data="tableData"
              size="small"
              :row-style="{height:'0'}"
              style="width: 100%"
              border
              height="calc(100vh - 270px)"
              v-loading="loading">
            <el-table-column
                v-for="(item,index) in fields"
                :key="index"
                :label="item.label"
                :prop="item.prop"
                :min-width="item.width"
                :fixed="item.fixed"
            >
              <template v-if="item.prop == 'operation'" scope="scope">

                <el-button @click="editInter(scope.row)" type="text" size="small">编辑</el-button>
                <el-button @click="removeInter(scope.row)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>

            <!-- 添加类别 -->
            <addInter ref="addInter" @success="queryInterfaceList"/>
            <!-- 编辑类别 -->
            <editInter ref="editInter"  @success="queryInterfaceList"/>

          </el-table>

          <div class="page-container" style="float:right">
            <el-pagination
                :page-sizes="[10, 20, 30, 50]"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="nowPage"
                :page-size="10"
                layout="sizes,total, prev, pager, next"
                :total="total">
            </el-pagination>
          </div>



        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import editClass  from "./components/EditInterClass.vue";
import addClass  from "./components/AddInterClass.vue";
import editInter  from "./components/EditInter.vue";
import addInter  from "./components/AddInter.vue";
import {getClassTree,saveClass,removeClass,getInterList,addInterfaceConfig,saveInterfaceConfig,removeInterface} from '@/api/workflowInterface.js';
import {removeSystem} from "@/api/resource";
export default {
  components:{
    editClass,
    addClass,
    addInter,
    editInter
  },
  data() {
    return {
      classExpandOnClickNode:false,
      //关联用户相关属性
      relateUserDrawer:false,
      direction: 'rtl',
      relateDrawerTitle:'关联用户',



      //侧边栏相关属性
      topNumber:0,
      leftNumber:0,
      optionCardShow:false,
      nowInterClass:{},
      nowEditInterClass:{},

      total: 0,
      classLoading: false,
      loading: false,
      nowPage:1,
      queryParams:{
        pageNum:1,
        pageSize:10,
        keyWord:"",
        classId:""
      },
      //类别
      classData:[],
      defaultProps:{
        children: 'child',
        label: 'className',
        id:"classId",
      },
      nowNodeId:0,
      fields:[
        {
          label:"接口类型",
          prop:"interType",
          width:150,
        },{
          label:"接口名称",
          prop:"interName",
          width:150
        },{
          label:"接口描述",
          prop:"desc",
          width:100
        },{
          label:"操作",
          prop:"operation",
          width:200,
          fixed: "right",
        }
      ],
      tableData: []
    }
  },
  created(){
    this.queryInterfaceClass();
  },
  methods:{
    async queryInterfaceClass(){
      let res = await getClassTree();
      this.classData = res.data.child;
    },
    refreshInterClass(){
      this.classLoading = true;
      this.queryInterfaceClass();
      this.tableData = [];
      this.queryParams.keyWord = '';
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.classLoading = false;
    },
    //添加接口
    addInterface(){
      if(this.nowInterClass.classId == null){
        this.$message.warning("请选择类别");
        return;
      }
      this.$refs["addInter"].showDialog({classId:this.nowInterClass.classId})
    },
    removeInter(row){
      this.$confirm('您是否要删除该数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await removeInterface({id:row.id});
        this.queryInterfaceList();
      }).catch(() => {
      });
    },
    //编辑流程
    editInter(row){
      this.$refs["editInter"].showDialog(row);
    },
    handleSizeChange(val) {
      this.queryParams.limit = val;
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
    },
    async queryInterfaceList(){
      if(this.nowInterClass == null){
        return;
      }
      this.loading = true;
      this.queryParams.classId = this.nowInterClass.classId;
      let res = await getInterList(this.queryParams);
      let content = res.data;
      this.tableData = content;
      this.loading = false;
    },

    classChange(){
      this.$refs["editClass"].showDialog(this.nowEditInterClass);
      this.optionCardShow = false;
    },
    addInterClass(){
      this.nowEditInterClass = null;
      this.$refs["addClass"].showDialog(null);
    },
    classAdd(){
      this.$refs["addClass"].showDialog(this.nowEditInterClass);
      this.optionCardShow = false;
    },
    addClassOperate(row){
      console.log(row);
      console.log(this.nowEditInterClass);
      if(this.nowEditIClass == null){
        this.classData.push(row);
      }else{
        console.log("新增数据："+row.classId);
        if(this.nowEditInterClass.child == null){
          this.nowEditInterClass.child = [];
        }
        this.nowEditInterClass.child.push(row);
      }
    },
    classRemove(){
      this.optionCardShow = false;
      this.$confirm('您是否要删除该类别?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await removeClass({classId:this.nowEditInterClass.classId});
        if(res.status === '200'){
          let parentData = getParentData(this.classData,this.nowEditInterClass.classId);
          if(parentData != null){
            for(let i =0 ; i< parentData.length; i++){
              if(parentData[i].classId == this.nowEditInterClass.classId){
                parentData.splice(i,1);
              }
            }
          }
        }

      }).catch(() => {
      });
    },

    handleNodeClick(interClass){
      this.loading = true;
      this.nowInterClass = interClass;
      this.queryInterfaceList();
    },
    // 点击框外区域 隐藏菜单
    OptionCardClose(event) {
      var currentCli = document.getElementById("option-button-group");
      if (currentCli) {
        if (!currentCli.contains(event.target)) {
          //点击到了id为option-button-group以外的区域，就隐藏菜单
          this.optionCardShow = false;
        }
      }
    },
    //鼠标右键部门
    contextMenu(event,data){
      console.log(data);
      this.optionCardShow = false
      this.nowEditInterClass = data;
      this.topNumber = event.pageY + 20;
      this.leftNumber = event.pageX;
      this.optionCardShow = true;
    },
  }

}


function getParentData(data,classId){
  for(var classD in data){
    if(classId === data[classD].classId){
      return data;
    }
    if(data[classD].child && data[classD].child.length > 0){
      let result = getParentData(data[classD].child,classId);
      if(result != null){
        return result;
      }
    }
  }
}

</script>

<style src="../css/index.scss" lang="scss"></style>
<style  lang="scss" scoped>
.search-item{
  float: left;
  margin: 0 20px 20px 0;
  span{
    color: #606266;
    font-size: 14px;
    margin-right: 0px;
  }
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  /* background: #d3dce6; */
}
.bg-purple-light {
  /* background: #e5e9f2; */
}
.top-from{
  height: 50px;
}
.grid-content {
  border: 1px solid #e1e4e7;
  border-radius: 4px;
  background: #fff;
  height: calc(100vh - 160px);
  overflow: auto;
  padding-top: 15px;
  padding-left: 20px;
  padding-right: 20px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.option-card-button {
  width: 100%;
  margin-left: 0;
  font-size: 12px;
  border-radius: 0;
}
</style>